<template>
<div id="yuepin">
	<mt-header title="天天拼货团">
		<mt-button slot="right" class="mui-icon mui-icon-compose" @click="sheetVisible =!sheetVisible"></mt-button>
	</mt-header>
	<div id="contentView">
		<div class="title">
			<img :src="imgs" alt="失败">
			<div class="title_right" >
				<span>{{titles}}</span>
				<span>帖子 {{number}}</span>
			</div>
			<button @click="showMessage">加入</button>
		</div>
      <ul
          v-infinite-scroll="loadMore"
          infinite-scroll-disabled="loading"
          infinite-scroll-distance="10">
          <li v-for="(item,key) in dataList" :key="key" class="outerli">
            <div class="top">
                <div class="content_title">
                  <img src="../../assets/zhailiyin.png" alt="失败" class="usericon">
                      <div class="text">
                          <span>{{item.UserName}}</span>
                          <span>{{item.TimeTips}}</span>
                      </div>
                      <div class="right">
                          <span  class="mui-icon mui-icon-eye">{{item.ViewCount}}</span>
                          <span class="mui-icon mui-icon-chat">{{item.PostCount}}</span>
                      </div>
                </div>
            </div>
          <!-- 图片文字  -->
          <div class="bottom">
              <p>{{item.Title}}</p>
                <ul v-if="item.Images.length>0">
                  <li v-for="(imagesitem,imagekey) in item.Images" v-if="imagekey<3" :key="imagekey">
                   <img :src="imagesitem"  alt="">
                  </li>
                </ul>
              <p v-if="item.Summary!=null">{{item.Summary}}</p>
          </div>
          </li>
           <div class="btn">别拉了,没有了</div>
      </ul>
	</div>
	<mt-actionsheet
		:actions="actions"
		v-model="sheetVisible">
	</mt-actionsheet>
</div>
</template>
<script>
export default {
  data() {
    return {
      dataList: [],
      titles: "",
      imgs: "",
      number: "",
      imageUrl: "",
      pageNo: 1,
      actions: [
        { name: "话题", method: "click1" },
        { name: "活动", method: "click2" }
      ],
      sheetVisible: false
    };
  },
  methods: {
    loadMore() {
      this.loading = true;
      setTimeout(() => {
        if (this.pageNo <= 30) {
          this.pageNo++;
          var _this = this;
          // 由于pageNo发生改变,因此请求的链接也相应发生改变
          var url = `http://api2.nahuo.com/v3/xiaozu/topic/list_v2/60033/${
            this.pageNo
          }/20?`;
          // 发送请求,请求新的数据
          this.$http
            .get(url)
            .then(function(response) {
              console.log("加载更多" + url);
              _this.dataList = response.data.Data;
            })
            .catch(function(error) {
              console.log("数据请求出错：" + error);
            });
        } else {
          return;
        }
        this.loading = false;
      }, 2000);
    },
    showMessage() {
      alert("请先登录");
    }
  },
  created() {
    var _this = this;
    this.$http
      .get("http://localhost:3000/api/yuepin")
      .then(function(response) {
        _this.dataList = response.data.Data;
        _this.imageUrl = response.data.Data[0].Images;
      })
      .catch(function(error) {
        console.log(error);
      });
    // title
    this.$http
      .get("http://localhost:3000/api/title")
      .then(function(response) {
        _this.imgs = response.data.Data.LogoUrl;
        _this.titles = response.data.Data.Name;
        _this.number = response.data.Data.TopicCount;
      })
      .catch(function(error) {
        console.log(error);
      });
  }
};
</script>
<style lang="scss" scoped>
#yuepin {
  width: 100%;
  height: 100%;
  .mint-header {
    width: 100%;
    height: 63px;
    font-size: 23px;
    position: fixed;
    top: 0;
    background: #c6091b;
    z-index: 2;
  }
  #contentView {
    position: absolute;
    top: 63px;
    bottom: 50px;
    width: 100%;
    height: 100%;
    .title {
      width: 100%;
      height: 60px;
      background: white;
      display: flex;
      flex-direction: row;
      font-size: 14px;
      img {
        width: 45px;
        height: 45px;
        margin: 8px;
      }
      .title_right {
        width: 100%;
        height: 60px;
        display: flex;
        flex-direction: column;
        span {
          display: flex;
          padding: 5px;
          flex: 1;
        }
      }
      button {
        background: red;
        color: white;
        margin: 10px;
        width: 100px;
        height: 35px;
      }
    }
    ul {
      width: 100%;
      height: 100%;
      margin-top: 10px;
      box-sizing: border-box;
      .btn {
        width: 100%;
        height: 25px;
        background: ghostwhite;
        margin-bottom: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 15px;
      }
      .outerli {
        width: 100%;
        min-height: 220px;
        margin-bottom: 10px;
        background: white;
        .top {
          width: 100%;
          height: 50px;
          .content_title {
            width: 100%;
            height: 50px;
            display: flex;
            flex-direction: row;
            img {
              width: 45px;
              height: 45px;
              display: flex;
              justify-content: center;
              align-items: center;
              margin: 5px;
              border-radius: 50%;
            }
            .text {
              display: flex;
              height: 100%;
              flex: 2;
              flex-direction: column;
              span {
                display: flex;
                flex: 1;
                font-size: 14px;
                padding: 5px;
                &:nth-child(1) {
                  color: rgba(26, 166, 212, 0.918);
                }
              }
            }
            .right {
              display: flex;
              height: 100%;
              flex-direction: row;
              span {
                display: flex;
                flex: 4;
                font-size: 14px;
                padding: 8px;
                justify-content: center;
                align-items: center;
                color: #cccccc;
              }
            }
          }
        }
        .bottom {
          padding: 8px;
          ul {
            display: flex;
            flex-direction: row;
            justify-content: center;
            width: 100%;
            height: 60px;
            li {
              width: 33.3%;
              height: 100px;
              img {
                width: 100%;
                height: 100px;
                box-sizing: border-box;
                padding: 5px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
